import React from 'react';
import { IGlobalReduceState } from "@/redux/reducers/global";
import { connect } from "react-redux";
import { AppState } from "@redux/reducers";
import ButtonBar from "@components/ButtonBar";

type IProps= IGlobalReduceState;
class MineBlock extends React.Component<IProps>{
    readonly state={
        buttonList:[
            {
                type:'edit',
                name:'编辑',
            },
            
        ]
    }
    handleEdit(){
        this.setState({
            buttonList:[
                {
                    type:'cancel',
                    name:'取消',
                },{
                    type:'confirm',
                    name:'确认',
                }
            ]

        })
    }
    handleCancel(){
        this.setState({
            buttonList:[
                {
                    type:'edit',
                    name:'编辑',
                },
            ]

        })
    }
    handleConfirm(){
        this.setState({
            buttonList:[
                {
                    type:'edit',
                    name:'编辑',
                },
            ]

        })
    }
    render(){
        return(
            <div className="MineBlock-Wrapper">
                <ButtonBar buttonList={this.state.buttonList} clickEdit={this.handleEdit.bind(this)} clickCancel={this.handleCancel.bind(this)} clickConfirm={this.handleConfirm.bind(this)}/>
                <div className="info-item">
                    <span>昵称：</span>
                    <span>{this.props.userInfo?.nickname}</span>
                    
                </div>
                <div className="info-item">
                    <span>性别：</span>
                    <span>{this.props.userInfo?.gender}</span>
                </div>
                <div className="info-item">
                    <span>生日：</span>
                    <span>{this.props.userInfo?.birthday}</span>
                </div>
                <div className="info-item">
                    <span>手机号码：</span>
                    <span>{this.props.userInfo?.phoneNo}</span>
                </div>
                <div className="info-item">
                    <span>邮箱：</span>
                    <span>{this.props.userInfo?.email}</span>
                </div>
                <div className="info-item">
                    <span>会员：</span>
                    <span>{this.props.userInfo?.isVip}</span>
                </div>
                <div className="info-item">
                    <span>等级：</span>
                    <span>{this.props.userInfo?.level}</span>
                </div>
                <div className="info-item">
                    <span>使用主题：</span>
                    <span>{this.props.userInfo?.theme.toLocaleUpperCase()}</span>
                </div>
                <div className="info-item">
                    <span>上次登录时间：</span>
                    <span>{this.props.userInfo?.lastLoginTime}</span>
                </div>
                <div className="info-item">
                    <span>账号创建时间：</span>
                    <span>{this.props.userInfo?.createDate}</span>
                </div>
                
            </div>
        )
    }
    
}

export default connect(
    (state:AppState)=>state.global,
)(MineBlock);